<template>
  <div class="fires_list">
    <div class="one">
      <div class="date">
        <span>预报日期</span>
        <el-date-picker v-model="value1" style="width:200px" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="button">
        <el-button>火险预报</el-button>
        <el-button>火险易发区</el-button>
        <el-button>生成文档</el-button>
        <el-button>模板编辑</el-button>
        <el-button>显示设置</el-button>
      </div>
    </div>
    <div class="inquery_title">查询</div>
    <div class="inquery">
      <div class="date">
        <span>预报日期</span>
        <el-date-picker v-model="value2" style="width:200px" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="button">
        <el-button>指数查看</el-button>
        <el-button>重点目标</el-button>
        <el-button>文档查看</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: "",
      value2: "",
    }
  }
}
</script>
<style scoped lang="less">
.fires_list {
  width: 100%;
  height: 100%;
  font-size: 12px;
  padding-right: 10px;
  box-sizing: border-box;
}
.fires_list .one{
  width: 100%;
  border: 1px solid;
  padding: 20px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  .date{
    width: 260px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .button{
    width: 260px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-button{
      margin: 0 0 10px;
    }
  }
}
.fires_list .inquery{
  width: 100%;
  height: 400px;
  border: 1px solid;
  padding: 20px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  .date{
    width: 260px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .button{
    // width: 260px;
    display: flex;
    flex-direction: column;
    .el-button{
      margin: 0 0 10px;
    }
  }
}
</style>
